<span class="back-icon"><</span>
<a *ngIf="hasSignedIn" (click)="backToProject()" class="backStyle">{{'PROJECT_DETAIL.PROJECTS' | translate}}</a>
<a *ngIf="!hasSignedIn" [routerLink]="['/harbor', 'sign-in']" class="backStyle"> {{'SEARCH.BACK' | translate}}</a>
<div class="clr-row">
    <div  class="clr-col-4">
        <h1 class="custom-h2 center" sub-header-title>
            <clr-icon *ngIf="isProxyCacheProject" shape="cloud-traffic" size="30"></clr-icon>
            <clr-icon *ngIf="!isProxyCacheProject" shape="organization" size="30"></clr-icon>
            <span class="ml-05">{{currentProject.name}}</span>
            <div class="divider filter-divider" *ngIf="isMember"></div>
            <span class="role-label" *ngIf="isMember">{{roleName | translate}}</span>
        </h1>
        <div class="clr-row mt-0 line-height-10" *ngIf="isProxyCacheProject">
            <span class="proxy-cache">{{ 'PROJECT.PROXY_CACHE' | translate }}</span>
        </div>
    </div>
    <div  class="clr-col-8 flex-end">
        <div class="card">
            <div class="card-block container">
                <div class="head">{{'PROJECT.ACCESS_LEVEL' | translate}}</div>
                <div class="storage-used font-weight-700">
                    <div>
                        <h3 class="mt-0">{{ (currentProject?.metadata?.public === 'true' ? 'PROJECT.PUBLIC' : 'PROJECT.PRIVATE') | translate}}</h3>
                    </div>
                </div>
            </div>
        </div>
        <div class="card" *ngIf="hasQuotaReadPermission">
            <div class="card-block container">
                <div class="head">{{'STATISTICS.STORAGE_USED' | translate }}</div>
                <div class="storage-used font-weight-700">
                    <div *ngIf="projectQuota">
                        <h3 class="mt-0 clr-display-inline-block">
                            <span class="size-number">{{getSizeNumber()}}</span>
                            <span>{{getSizeUnit()}}</span>
                        </h3>
                        <span class="of">{{ 'QUOTA.OF' | translate }}</span>
                        <span>{{ projectQuota?.hard?.storage ===-1? ('QUOTA.UNLIMITED' | translate) : getIntegerAndUnit(projectQuota?.hard?.storage, projectQuota?.used?.storage).partNumberHard }}</span>
                        <span>{{ projectQuota?.hard?.storage ===-1? '':  getIntegerAndUnit(projectQuota?.hard?.storage, projectQuota?.used?.storage).partCharacterHard }}</span>
                        <div>
                            <div class="progress-block progress-min-width progress-div">
                                <div class="progress success"
                                     [class.danger]="projectQuota?.hard?.storage!==-1?projectQuota?.used?.storage/projectQuota?.hard?.storage>quotaDangerCoefficient:false"
                                     [class.warning]="projectQuota?.hard?.storage!==-1?projectQuota?.used?.storage/projectQuota?.hard?.storage<=quotaDangerCoefficient&&projectQuota?.used?.storage/projectQuota?.hard?.storage>=quotaWarningCoefficient:false">
                                    <progress
                                            value="{{projectQuota?.hard?.storage===-1? 0 : projectQuota?.used?.storage}}"
                                            max="{{projectQuota?.hard?.storage}}" data-displayval="100%"></progress>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<clr-tabs id="project-tabs" class="tabs" [class.in-overflow]="isTabLinkInOverFlow()">
    <ng-container *ngFor="let tab of tabLinkNavList;let i=index">
        <ng-container *ngIf="tab.permissions()">
            <clr-tab>
                <button [class.clear-default-active]="isDefaultTab(tab, i)" [clrTabLinkInOverflow]="tab.tabLinkInOverflow" id="{{'project-'+tab.linkName}}" clrTabLink
                    routerLink="{{tab.linkName}}" routerLinkActive="active" type="button">
                    <a class="nav-link">{{tab.showTabName | translate}}</a></button>
            </clr-tab>
        </ng-container>
    </ng-container>
</clr-tabs>

<router-outlet></router-outlet>
